import React 					from 'react';
import PageTitle    			from 'component/pagetitle/index.jsx';
import Util						from 'util/mm.jsx';
import Order					from 'service/order-service.jsx';
import TableView				from 'component/tableview/index.jsx';

import './index.scss';

const _mm 			= new Util();
const _order 		= new Order();

class OrderDetail extends React.Component{
	constructor(props){
		super(props);
		this.state = {
			orderNo				: this.props.match.params.orderNo,
			payment				: 0,
			paymentTypeDesc		: 0,
			statusDesc			: '',
			createTime			: '',
			receiverInfo		: '',
			orderItemVoList		: []
		}
	}
	componentDidMount(){
		this.loadOrder();
	}
	
	loadOrder(){
		_order.getOrder(this.state.orderNo)
						.then(res => {
							res.receiverInfo = `${res.shippingVo.receiverName}，
												${res.shippingVo.receiverProvince}${res.shippingVo.receiverCity}${res.shippingVo.receiverDistrict}${res.shippingVo.receiverAddress}，
												 ${res.shippingVo.receiverMobile}`;
							this.setState(res);
						},errMsg => {
							_mm.errorTips(errMsg);
						});
	}
	
	
	
	
	render(){
		const tbodyList = this.state.orderItemVoList.map((product,index) => {
			const imagePath = this.state.imageHost + product.productImage;
			return (
				<tr key={index}>
					<td>
						<img src={imagePath} className='table-inner-img' />
					</td>
					<td>{product.productName}</td>
					<td>￥{product.currentUnitPrice}</td>
					<td>{product.quantity}</td>
					<td>￥{product.totalPrice}</td>
				</tr>
			)
		});
		
		
		return (
			<div id="page-wrapper">
				<PageTitle title='订单详情' />
				<div className="form-horizontal">
				  <div className="form-group">
					<label  className="col-md-2 control-label">订单号：</label>
					<div className="col-md-5" style={{backgroundColor:'#fff'}}>
						<p className="form-control-static">{this.state.orderNo}</p>
					</div>
				  </div>
				  <div className="form-group">
					<label  className="col-md-2 control-label">创建时间：</label>
					<div className="col-md-5">
					  <p className="form-control-static">{this.state.createTime}</p>
					</div>
				  </div>
				  <div className="form-group">
				  <label  className="col-md-2 control-label">收件人：</label>
				  <div className="col-md-5">
				  	<p className="form-control-static">{this.state.receiverInfo}</p>
				  </div>
				  </div>
				  <div className="form-group">
					  <label  className="col-md-2 control-label">订单状态：</label>
					  <div className="col-md-5">
						<p className="form-control-static">{this.state.statusDesc}</p>
					  </div>
				  </div>
				  <div className="form-group">
				  	<label  className="col-md-2 control-label">支付方式：</label>
				  	<div className="col-md-5">
				  	<p className="form-control-static">{this.state.paymentTypeDesc}</p>
				  	</div>
				  </div>
				  <div className="form-group">
					<label  className="col-md-2 control-label">订单金额：</label>
					<div className="col-md-5">
					  <p className="form-control-static">￥{this.state.payment}</p>
					</div>
				  </div>
				  
				  <TableView theaders={['商品图片','商品信息','单价','数量','合计']} >
				  	{tbodyList}
				  </TableView>
				  
				</div>
			</div>
		)
	}
}

export default OrderDetail;
